@extends('layouts.wx')

@section('content')
<style>
.title {
    text-align: center;
    font-size: 34px;
    color: #3cc51f;
    font-weight: 400;
    margin: 0 15%;
}
  
</style>
<div class="weui-cells weui-cells_form" id="main">
    <h3 class="title">司机注册</h3>
    <form action="{{ route('driver.reg') }}" name="fm_order" method="post" onsubmit="return checkForm()">
        
        {{csrf_field()}}
       
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" name="phone" placeholder="请输入手机号" value="">
            </div>
            <div class="weui-cell__ft">
                <button type="button" onclick="sendVcode(this)" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>  
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input"  type="text" name="vcode"  placeholder="4位数的验证码">
            </div>
        </div>      
        <button type="submit"  class="weui-btn weui-btn_primary">提交</button>
    </form>
</div>
@endsection
@section('js')
<script>
    
    
    function  checkForm() {
        var phone = $('input[name="phone"]').val();
        if(!(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/.test(phone))){
            alert("手机号码格式错误！");
            return false;
        }

        var vcode = $('input[name="vcode"]').val();
        if($.trim(vcode)=='') {
            alert("请填写验证码！");
            return false;
        }
        

        return true;
    }


var n = 60;
var timer;
function sendVcode(el){
    var phone = $('input[name="phone"]').val();
    if(!phone || phone.length<11) {
         $.toast("手机号格式错误！",'cancel', function() {});
         return false;
    }
    if(timer)
        return;
    
    $.get("{{route('vcode')}}?phone="+phone,function(resp){
        if(resp.success) {
            n = 60;
            $(el).text('剩余60秒');
            $(el).addClass('txt_gray');
            timer = setInterval(function(){
                if(n>0) {
                    n--;                
                    $(el).text('剩余'+n+'秒');    
                } else {                            
                    clearInterval(timer);                
                    n = 60;
                    $(el).text('获取验证码');
                    $(el).removeClass('txt_gray');
                    timer = null;
                }            
            },1000);
        } else {
            $.toast(resp.msg,'cancel', function() {});
        }
    });
}   
    
</script>
@include('public.error')
@endsection
